<template>
  <head-top :loading="loading">
    <view class="shopdetail">
      <view class="shopdetail_swiper">
        <u-swiper :list="list5" @change="e => current = e.current" :current="current" :autoplay="true" height="750rpx">
        </u-swiper>
      </view>
      <scroll-view class="shopdetail_indicator" scroll-x="true">
        <view class="shopdetail_margin" v-for="item, indexs in list5" :key="indexs" @click="onTabImg(indexs)">
          <!-- #ifdef H5 -->
          <u-image :src="item" :lazy-load="true" width="80rpx" mode="aspectFit" height="80rpx"
            :class="[current === indexs && 'shopdetail_active']">
          </u-image>
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN -->
          <image :src="item" :lazy-load="true" mode="aspectFit" :class="[current === indexs && 'shopdetail_active']">
          </image>
          <!-- #endif -->

        </view>
      </scroll-view>
      <view class="shopdetail_title">
        <view class="shopdetail_head">
          <view class="shopdetail_money">
            <b-money price="1888.88" is_hidden></b-money>
            <view class="shopdetail_left">分享200福袋免单</view>
          </view>
          <view class="hui">
            已售287件
          </view>
        </view>
        <view>
          大Eees 高定盛夏 法式茶歇航海度假风长短款连衣裙浪漫优雅连衣裙
        </view>
      </view>
      <view class="shopdetail_Product">
        <Product></Product>
      </view>
      <view class="shopdetail_area">
        <view>
          <view>邮费&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;免运费</view>
          <view class="shopdetail_area_hui">配送至:&nbsp;&nbsp;未有收货地址</view>
        </view>
        <view class="">
          <u-icon name="arrow-right" size="17"></u-icon>
        </view>
      </view>
      <view class="shopdetail_comment">
        <view> 评论 （1314）</view>
        <view>
          <u-icon name="arrow-right" size="17"></u-icon>
        </view>
      </view>
      <BShopList shopName="进店逛逛"></BShopList>
      <view class="shopdetail_images"></view>
    </view>
    <Border></Border>

  </head-top>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import BShopList from '@/components/BShopList/shopList.vue'
import Product from '@/components/BShopProduct/Product.vue'
import Border from '@/components/Border/Border.vue'

const loading = ref<boolean>(false)
const current = ref<number>(0)
const list5 = reactive([
  'https://img1.baidu.com/it/u=347034249,179256317&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
  'https://img1.baidu.com/it/u=347034249,179256317&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
  'https://img1.baidu.com/it/u=347034249,179256317&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
  'https://img1.baidu.com/it/u=347034249,179256317&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
  'https://img1.baidu.com/it/u=347034249,179256317&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
  'https://img1.baidu.com/it/u=347034249,179256317&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
  'https://img1.baidu.com/it/u=347034249,179256317&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
  'https://img1.baidu.com/it/u=347034249,179256317&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
  'https://img1.baidu.com/it/u=347034249,179256317&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
  'https://img1.baidu.com/it/u=347034249,179256317&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
  'https://img1.baidu.com/it/u=347034249,179256317&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
]
)
function onTabImg(Node) {
  current.value = Node
}

</script>
<style scoped lang="scss">
@import './index.scss'
</style>